<template>
  <div id="home">
    <van-nav-bar :title="$route.meta.title" fixed />
    <!-- 推荐歌单 -->
    <p class="title">推荐歌单</p>

    <!-- 电台 -->
    <div class="song_name">
      <!-- 循环图片 -->
      <van-row gutter="8">
        <van-col
          span="8"
          class="img_box"
          v-for="item in recommendList"
          :key="item.id"
        >
          <van-image width="100%" height="100px" :src="item.picUrl">
            <!-- 图片下方文字 -->
            <span>{{ item.name }}</span>
          </van-image>
        </van-col>
      </van-row>
    </div>

    <!-- 最新音乐 -->
    <p class="title" style="margin: 0">最新音乐</p>

    <!-- 音乐列表 -->
    <van-cell-group>
      <van-cell
        center
        :title="item.name"
        :label="item.song.artists | artists"
        v-for="item in recommendNewMusic"
        :key="item.id"
        @click="PlayMusic(item.id)"
      >
        <van-icon slot="right-icon" name="play-circle-o" size=".8rem" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { recommendListAPI, RecommendNewMusicAPI, PlayMusicAPI } from "@/api";
export default {
  name: "Home",
  data() {
    return {
      recommendList: [],
      recommendNewMusic: [],
    };
  },
  created() {
    this.LoadrecommendList();
    this.RecommendNewMusicAPI();
  },
  methods: {
    // 请求推荐歌单
    async LoadrecommendList() {
      const { data: res } = await recommendListAPI({ limit: 6 });
      this.recommendList = res.result;
    },
    // 请求推荐最新音乐
    async RecommendNewMusicAPI() {
      const { data: res } = await RecommendNewMusicAPI();
      // console.log(res);
      this.recommendNewMusic = res.result;
    },

    // 点击播放音乐
    async PlayMusic(id) {
      // console.log(id);
      const { data: res } = await PlayMusicAPI({ id });
      window.location.href = res.data[0].url;
    },
  },
  filters: {

    // 过滤
    artists(arr) {
      const art = arr.reduce((str, item) => {
        return (str += item.name + '~');
      }, "");
      return art.substr(0, art.length - 1);
    },
  },
};
</script>

<style lang="less" scoped>
/* 标题 */
.title {
  padding: 8.533344px 7.68px;
  margin: 0 0 7.68px 0;
  background-color: #eee;
  color: #333;
  font-size: 0.46875rem;
}
/* 推荐歌单 - 歌名 */
.song_name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 11.093344px;
  padding: 0 2.56px;
  margin-bottom: 8.533344px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.img_box {
  margin-bottom: 20px;
}
</style>